/* ==========================================================
   One Powerhouse, Five Engines of Enterprise Speed
   File: wwwroot/css/speed-engines.css
   Used by: Views/Partials/blocklist/Components/speedEnginesBlock.cshtml
   ========================================================== */
.sp-eng {
  --eng-orange: #ff9a45;
  --eng-navy: #14256b;
  --eng-gutter: 7vw;
  --eng-ease: cubic-bezier(.65, 0, .35, 1);
  --eng-ease-out: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: clamp(560px, 48.8vw, 1260px);
  background: #1a2a1c;
  padding: clamp(36px, 3.8vw, 98px) 0 clamp(28px, 2.8vw, 72px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.sp-eng *, .sp-eng *::before, .sp-eng *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- background ---------- */
.sp-eng__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sp-eng__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-eng__media::after {                     /* darkens top and bottom so the white text always reads */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .12) 26%, rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, .45) 100%);
}

/* ---------- heading row ---------- */
.sp-eng__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25vw;
  gap: 4vw;
  align-items: start;
  padding: 0 var(--eng-gutter);
}
.sp-eng__heading {
  font-size: clamp(22px, 1.5vw, 40px);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.sp-eng__intro {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .95vw, 24px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
}

/* ---------- five columns ---------- */
.sp-eng__cols {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  align-items: stretch;
  margin-top: clamp(40px, 8.7vw, 230px);
  min-height: clamp(260px, 18.4vw, 480px);
  list-style: none;
}
.sp-eng__col {
  position: relative;
  outline: none;
  cursor: pointer;
}
/* thin divider lines between columns (not beside the open card) */
.sp-eng__col + .sp-eng__col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: rgba(255, 255, 255, .7);
  transition: opacity .6s ease;
}
.sp-eng__col.is-active::before,
.sp-eng__col.is-active + .sp-eng__col::before { opacity: 0; }

/* collapsed view */
.sp-eng__mini {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  padding: 0 clamp(16px, 1.8vw, 46px);
  transform: translateY(-50%);
  transition: opacity .5s ease .25s, transform .7s var(--eng-ease-out) .2s;
}
.sp-eng__col.is-active .sp-eng__mini {
  opacity: 0;
  transform: translateY(calc(-50% + 10px));
  transition: opacity .3s ease, transform .4s ease;
}
.sp-eng__num {
  display: block;
  font-size: clamp(9px, .7vw, 18px);
  font-weight: 600;
  color: #fff;
}
.sp-eng__mini .sp-eng__num { margin-bottom: clamp(8px, .9vw, 22px); }
.sp-eng__mini-title {
  display: block;
  font-size: clamp(14px, 1vw, 26px);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  transition: color .4s ease;
}
.sp-eng__col:not(.is-active):hover .sp-eng__mini-title { color: var(--eng-orange); }

/* open view: glass card */
.sp-eng__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.55vw, 40px) clamp(16px, 1.6vw, 42px) clamp(18px, 1.7vw, 44px);
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.98);
  transition: opacity .35s ease, transform .45s ease, visibility 0s linear .45s;
}
.sp-eng__col.is-active .sp-eng__card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .7s ease .12s, transform .9s var(--eng-ease-out) .12s, visibility 0s;
}
/* lines inside the card rise one after another */
.sp-eng__card > * { opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .3s ease; }
.sp-eng__col.is-active .sp-eng__card > * { opacity: 1; transform: none; transition: opacity .6s ease, transform .8s var(--eng-ease-out); }
.sp-eng__col.is-active .sp-eng__card > :nth-child(1) { transition-delay: .2s; }
.sp-eng__col.is-active .sp-eng__card > :nth-child(2) { transition-delay: .28s; }
.sp-eng__col.is-active .sp-eng__card > :nth-child(3) { transition-delay: .34s; }
.sp-eng__col.is-active .sp-eng__card > :nth-child(4) { transition-delay: .42s; }

.sp-eng__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sp-eng__title {
  font-size: clamp(14px, 1vw, 26px);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}
.sp-eng__tagline {
  margin-top: clamp(8px, .85vw, 22px);
  font-size: clamp(11px, .83vw, 22px);
  font-weight: 600;
  color: var(--eng-orange);
}
.sp-eng__text {
  margin-top: clamp(10px, 1.1vw, 28px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, .95vw, 24px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .95);
}
.sp-eng__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: .75em 1em;
  background: var(--eng-orange);
  font-size: clamp(10px, .75vw, 19px);
  font-weight: 500;
  color: var(--eng-navy);
  text-decoration: none;
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.sp-eng__btn svg { width: 2em; height: .8em; transition: transform .5s var(--eng-ease-out); }
.sp-eng__btn:hover { background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.sp-eng__btn:hover svg { transform: translateX(4px); }
.sp-eng__col:focus-visible .sp-eng__card { box-shadow: inset 0 0 0 2px var(--eng-orange); }

/* ---------- call to action ---------- */
.sp-eng__cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
  padding: clamp(40px, 9vw, 230px) var(--eng-gutter) 0;
}
.sp-eng__cta-title {
  font-size: clamp(20px, 1.45vw, 38px);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.sp-eng__cta-text {
  margin-top: clamp(6px, .6vw, 16px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .9vw, 23px);
  color: rgba(255, 255, 255, .92);
}
.sp-eng__cta-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: clamp(30px, 5vw, 130px);
  padding: .55em .55em .55em 1.1em;
  overflow: hidden;
  isolation: isolate;
  background: var(--eng-orange);
  font-size: clamp(11px, .78vw, 20px);
  font-weight: 500;
  color: var(--eng-navy);
  text-decoration: none;
}
.sp-eng__cta-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: var(--eng-navy);
  color: #fff;
}
.sp-eng__cta-dot::before {                   /* navy fill spreads across the button on hover */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--eng-navy);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.sp-eng__cta-dot svg { width: 45%; height: 45%; transition: transform .45s var(--eng-ease-out); }
.sp-eng__cta-btn span:first-child { position: relative; z-index: 1; transition: color .35s ease .05s; }
.sp-eng__cta-btn:hover .sp-eng__cta-dot::before { transform: scale(14); }
.sp-eng__cta-btn:hover span:first-child { color: #fff; }
.sp-eng__cta-btn:hover .sp-eng__cta-dot svg { transform: translate(2px, -2px); }
.sp-eng a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- entrance ---------- */
.sp-eng.js-reveal .sp-eng__fx { opacity: 0; transform: translateY(22px); }
.sp-eng.js-reveal.is-visible .sp-eng__fx {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease var(--fd, 0s), transform 1.2s var(--eng-ease-out) var(--fd, 0s);
}

/* ---------- tablet: 5 columns get tight, so the card list becomes an accordion ---------- */
@media (max-width: 1100px) {
  .sp-eng { --eng-gutter: 32px; min-height: 0; }
  .sp-eng__head { grid-template-columns: 1fr; gap: 14px; }
  .sp-eng__intro { max-width: 560px; }
  .sp-eng__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    margin: 32px var(--eng-gutter) 0;
  }
  .sp-eng__col { border-top: 1px solid rgba(255, 255, 255, .35); }
  .sp-eng__col + .sp-eng__col::before { display: none; }
  .sp-eng__mini { position: relative; top: auto; transform: none; padding: 14px 0; display: flex; gap: 14px; align-items: baseline; }
  .sp-eng__mini .sp-eng__num { margin: 0; }
  .sp-eng__col.is-active .sp-eng__mini { display: none; }
  .sp-eng__card { position: relative; inset: auto; display: none; }
  .sp-eng__col.is-active .sp-eng__card { display: flex; }
  .sp-eng__btn { margin-top: 16px; }
  .sp-eng__cta { padding-top: 40px; }
}
@media (max-width: 600px) {
  .sp-eng { --eng-gutter: 20px; }
  .sp-eng__cta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-eng *, .sp-eng *::before { transition-duration: .01s !important; transition-delay: 0s !important; }
}